<template>
    <div id="AddCoupon" style="height: 847px;!important;">

        <el-container>

            <!--  页头 -->
            <el-header style="background-color: #F3F3F3">
                <span style="background-color: rgb(26, 188, 156)">&nbsp;</span> <span>添加优惠券</span>

                <div class="h-but">
                    <el-button @click="Refresh" size="small" ><i class="el-icon-refresh"></i> 刷新</el-button>
                    <el-button @click="back" size="small" ><i class="el-icon-arrow-left"></i> 返回</el-button>
                </div>
            </el-header>

            <!--  表单 -->
            <el-main  style="background-color: #FFFFFF">
                <div style="text-indent: 5px;background-color: #F3F3F3;">
                    <i class="el-icon-circle-plus-outline"></i> 添加优惠券
                </div>
                <div class="m-div">
                    <el-form ref="Coupon" :rules="config" :model="Coupon" label-width="110px">

                        <el-form-item prop="couponName" label="优惠券名称：">
                            <el-input v-model="Coupon.couponName"></el-input>
                        </el-form-item>

                        <el-form-item prop="startDate" style="margin-top: 5px;border-bottom: 0px" label="开始时间：">
                            <el-col class="setLen" :span="18">
                                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="Coupon.startDate" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>

                        <el-form-item prop="endDate" style="margin-top: 5px;border-bottom: 0px" label="结束时间：">
                            <el-col class="setLen" :span="18">
                                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="Coupon.endDate" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>

                        <el-form-item label="上线/下线：">
                            <el-radio-group v-model="Coupon.online">
                                <el-radio :label="2">上线</el-radio>
                                <el-radio :label="3">下线</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item prop="couponPrice" label="优惠券金额：">
                            <el-input v-model.number="Coupon.couponPrice" ></el-input>
                        </el-form-item>

                        <el-form-item prop="issueQuantity" label="发放数量：">
                            <el-input v-model.number="Coupon.issueQuantity"></el-input>
                        </el-form-item>

                        <el-form-item label="获取方式：">
                            <el-select v-model="Coupon.grant" placeholder="请选择活动区域">
                                <el-option label="自动" :value="2"></el-option>
                                <el-option label="活动领取" :value="3"></el-option>
                                <el-option label="人工发放" :value="4"></el-option>
                                <el-option label="无限制" :value="5"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="备注：">
                            <el-input type="textarea" v-model="Coupon.remarks"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button style="margin-left: 113px" type="primary" @click="establish(`Coupon`)">立即创建</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </el-main>

        </el-container>

    </div>
</template>

<script>
export default {
    inject: ['reload'],
    data(){
      return{
          //表单数据
          Coupon: {
              couponName: '',
              startDate: '',
              endDate: '',
              online: 2,
              grant: 2,
              issueQuantity: '',
              couponPrice: '',
              remarks: ''
          },
          //表单必填配置
          config: {
              couponName: [{
                  required: true,
                  message: '优惠券名称不能为空',
                  trigger: 'change'
              }],
              startDate: [{
                  required: true,
                  message: '开始时间不能为空',
                  trigger: 'change'
              }],
              endDate: [{
                  required: true,
                  message: '结束时间不能为空',
                  trigger: 'change'
              }],
              issueQuantity: [{
                  required: true,
                  message: '发放数量不能为空',
                  trigger: 'change'
              },
              {
                  type: 'number',
                  message: '发放数量必须为数字值'
              }],
              couponPrice: [{
                  required: true,
                  message: '优惠券金额不能为空',
                  trigger: 'change'
              },
              {
                  type: 'number',
                  message: '优惠券金额必须为数字值'
              }]
          }
      }
    },
    methods:{
        //刷新按钮
        Refresh(){
            this.reload()
        },
        //返回按钮
        back(){
            this.$router.back()
        },
        //优惠券添加
        establish(Coupon){
            console.log(Coupon)
            this.$refs[Coupon].validate((valid) => {
                if (valid) {
                    this.$http.get("/Coupon/addCoupon",{params:this.Coupon}).then(res => {
                        if (res.data.status == 200) {
                            this.$message(res.data.msg);
                            this.reload()
                        }else{
                            this.$message(res.data.msg);
                            this.reload()
                        }
                    })
                }else {
                    this.$message ( {
                        duration:1000,
                        type: "info" ,
                        message:"请填写必填项!"
                    });
                }
            })


        },
    }

}
</script>

<style scoped>
    .el-header{
        line-height: 50px;
        padding: 0px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
    }
    .el-main{
        background-color: #F3F3F3;
        padding: 0px;
        line-height: 62px;
        /*height: 130px;*/
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
    }
    .el-form-item{
        display: inline-block;
        margin-left: 95%;
        width: 100%;
    }
    .h-but{
        display: inline-block;
        float: right;
        margin-right: 16px;
    }
    .setLen{
        margin: 0px;
    }
    .m-div{
        /*height: 800px;*/
        width: 500px;
    }
</style>
